<template>
	<div>
		<div class="check-city">
			<n-checkbox
				v-model:checked="checkAll"
				:checked-value="checkCities"
				:indeterminate="isIndeterminate"
				@update:checked="handleCheckAll"
			>
				全选
			</n-checkbox>
			<div v-for="(item, index) in provinceList" :key="index" class="check-city-item">
				<div class="check-city-item-left">
					<n-checkbox
						v-model:checked="item.checkAll"
						:indeterminate="item.isIndeterminate"
						:label="item.province"
						@update:checked="(checked) => handleCheckedCitiesChangeAll(checked, item)"
					/>
				</div>
				<div class="check-city-item-right">
					<n-checkbox-group
						:value="item.cities"
						@update:value="(checked) => handleCheckedCitiesChange(checked, item)"
					>
						<n-grid cols="m:4 l:4 xl:6 2xl:7" responsive="screen">
							<n-gi v-for="location in item.locations" :key="location.id">
								<n-checkbox :value="location.id" :label="location.city" />
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, defineExpose } from 'vue';
import { provinceAll } from '@/api/bannerMange';
import { useRoute } from 'vue-router';
const route = useRoute();

const checkAll = ref(false);
const checkAllCities = ref([]); //选中城市id
const provinceList = ref([]);
const init = async () => {
	let params = {
		admin: route.query.admin
	};
	let res = await provinceAll(params);
	let list = res.data || [];
	provinceList.value = list.map((province) => {
		province.isIndeterminate = false;
		province.checkAll = false;
		province.cities = [];
		return province;
	});
};
init();
const checkCities = computed(() => {
	if (!provinceList.value.length) return;
	let checkCitiesArray = provinceList.value.map((province) => province.cities);
	checkAllCities.value = checkCitiesArray.flat();
	return checkAllCities.value;
});
const isIndeterminate = computed(() => {
	// 判断省是否全选或部分选中
	if (!provinceList.value.length) return false;
	let checkAllArr = provinceList.value.filter((province) => province.checkAll);
	if (checkAllArr.length === provinceList.value.length) {
		checkAll.value = true;
		provinceList.value.map((province) => (province.isIndeterminate = false));
		return false;
	}
	if (provinceList.value.some((province) => province.cities.length)) {
		return true;
	} else {
		checkAll.value = false;
		return false;
	}
});
const handleCheckAll = (checked) => {
	if (checked) {
		// 省全选
		provinceList.value.map((province) => {
			province.cities = province.locations.map((city) => city.id);
			province.checkAll = true;
		});
	} else {
		provinceList.value.map((province) => {
			province.cities = [];
			province.checkAll = false;
			province.isIndeterminate = false;
		});
	}
};
const handleCheckedCitiesChangeAll = (checked, item) => {
	// 站点  城市 全选
	if (checked) {
		item.cities = item.locations.map((c) => c.id);
	} else {
		item.cities = [];
	}
	item.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value, item = {}) => {
	// 站点  城市 多选  和 城市全选联动
	item.cities = value;
	const checkedCount = value.length;
	item.checkAll = checkedCount === item.locations.length;
	if (checkedCount > 0 && checkedCount < item.locations.length) {
		item.isIndeterminate = true;
		checkAll.value = false;
	} else if (checkedCount !== 0) {
		checkAll.value = true;
	} else {
		checkAll.value = false;
		item.checkAll = false;
		item.isIndeterminate = false;
	}
};
defineExpose({
	checkAllCities
});
</script>

<style lang="less" scoped>
.check-city {
	&-item {
		margin: 10px 0;
		padding: 16px 10px;
		display: flex;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #f0f0f0;
		&-left {
			width: 12.5%;
			flex-shrink: 0;
		}
		&-right {
			flex: 1;
		}
	}
}
</style>
